<template>
  <el-container>
    <el-header style="height: 55px;">
      <div class="header">
        <div class="p-title">贵州省疫情精准防控大数据综合管理平台</div>
        <div class="p-sub-title">
          <el-tag class="radius-tag" effect="dark" size="medium">场所码管理</el-tag>
        </div>
        <div class="r-header">
          <div class="system-toggle">
            <el-dropdown>
              <span class="dropdown-link">系统切换</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>平台管理系统</el-dropdown-item>
                <el-dropdown-item>防控管理系统</el-dropdown-item>
                <el-dropdown-item>防疫设备管理系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="message-wrap">
            <el-badge :value="2" :max="10" class="item">
              <i class="el-icon-bell"></i>
            </el-badge>
          </div>
          <div class="right-menu">
            <el-dropdown
              trigger="click"
            >
              <div class="avatar-wrapper">
                <div class="user-avatar">
                  <el-avatar
                    size="medium"
                    fit="fill"
                    :src="avatar"
                  >
                    <el-avatar>avatar</el-avatar>
                  </el-avatar>
                </div>
                <div class="user-name">总攻3T</div>
              </div>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/profile/index">
                  <el-dropdown-item>个人信息</el-dropdown-item>
                </router-link>
                <el-dropdown-item>
                  <!-- @click="setting" -->
                  <span
                    style="display:block;"
                  >
                    系统设置
                  </span>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <span
                    @click="logout"
                    style="display:block;"
                  >
                    退出登录
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside class="custom-aside" width="235px">
        <el-menu
          router
          background-color='#fff'
          text-color='#2f3542'
          active-text-color='#5352ed'
          :collapse-transition='true'
          mode='vertical'
        >
          <el-menu-item index="/csm/dashboard">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/pla/menu">
            <template slot="title">
              <!-- <e-icon icon-name='el-icon-menu' class="sub-el-icon"/> -->
              <!-- fa-vcard -->
              <i class="el-icon-menu"></i>
              <span slot='title'>权限管理</span>
            </template>
            <el-menu-item index="/pla/menu">菜单管理</el-menu-item>
            <!-- <el-menu-item index="/pla/orgService">机构管理</el-menu-item> -->
            <el-menu-item index="/pla/role">角色管理</el-menu-item>
            <el-menu-item index="/pla/user">用户管理</el-menu-item>
          </el-submenu>
          <!-- <sidebar-item
            v-for='route in userRoutes'
            :key='route.path'
            :item='route'
            :base-path='route.path'
          /> -->
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'TestHome',
  data() {
    return {
      avatar: require(`@/assets/avatar.jpg`)
    }
  },
  methods:{
    logout(){
      token.logout()
      this.$router.replace("/login")
      // if(!this.userInfo){
      //   token.logout()
      //   this.$router.replace("/login")
      // }else{
      //   const requestData = {
      //     clientId: 'admin_web',
      //     userId: this.userInfo.userId,
      //     token: token.get()
      //   }
      //   this.$postJson(logoutUrl, requestData).then(res => {
      //     if(res){
      //       token.logout()
      //       this.$router.replace("/bid-login")
      //     }
      //   })
      // }
      
    }
  }
}
</script>
<style lang="scss">
.el-header {
  height: 55px;
  padding: 0;
}
.el-aside {
    height: calc(100vh - 55px);// 设置左侧 aside 高度
}
.el-main {
    padding: 0;
    height: calc(100vh - 55px);// 设置主体 main 高度
}

.el-menu{
  border: 0;
}

.custom-aside{
  margin:0;
  padding:0;
  background-color:#fff;
}
.header{
  width: 100%;
  background-color: #fff;
  height: 55px;
  padding: 0 15px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  font-size: 1rem;

  .p-title{
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .p-sub-title{
    margin-left: 1rem;

    .radius-tag{
      border-radius: 15px;
    }
  }

  .r-header{
    flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;

    .dropdown-link{
      font-size: 1rem;
    }

    .message-wrap{
      margin: 0 2rem;
    }

  }

  .right-menu {
    
    .avatar-wrapper {
      display: flex;
      display: -webkit-flex;
      cursor: pointer;
      align-items: center;
      .user-name {
        margin-left: 8px;
        font-size: 1rem;
      }
      
    }
  }
}
</style>